<template>
    <el-container direction="vertical">
        <el-table
                :data="sites"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="flag"
                    label="标识"
                    width="70">
                <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row.flag" v-if="scope.row.edit" placeholder="唯一标识"></el-input>
                    <span v-if="!scope.row.edit">{{scope.row.flag}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名称"
                    width="120">
                <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row.name"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="api"
                    label="API"
                    width="400">
                <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row.api"></el-input>
                </template>
            </el-table-column>
            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <el-button type="danger" size="mini" @click="cjAllSite">采集所有站点</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button-group style="margin-right: 10px">
                        <el-button size="mini" @click="showBind(scope.$index)" :disabled="scope.row.edit">分类绑定</el-button>
                        <el-button size="mini" @click="cjSite(scope.$index, 24)" :disabled="scope.row.edit">采集当天</el-button>
                        <el-button size="mini" @click="cjSite(scope.$index, 168)" :disabled="scope.row.edit">采集本周</el-button>
                        <el-button size="mini" @click="cjSite(scope.$index, 0)" :disabled="scope.row.edit">采集全部</el-button>
                    </el-button-group>
                    <el-button
                            size="mini"
                            :type="scope.row.enable ? 'warning' : 'success'"
                            :icon="scope.row.enable ? 'el-icon-turn-off' : 'el-icon-open'"
                            @click="scope.row.enable = !scope.row.enable" title="禁用后不会再采集本站">{{scope.row.enable ? '禁用' : '启用'}}
                    </el-button>
                    <el-button size="mini"
                               :type="scope.row.edit ? 'primary':'danger'"
                               :icon="scope.row.edit ? 'el-icon-plus':'el-icon-finished'"
                               @click="scope.row.edit ? addSite(scope.$index) : saveSite(scope.$index)">{{scope.row.edit ? '增加' : '保存'}}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="分类绑定"
                :visible.sync="classBindVisible"
                :before-close="closeClassBind"
                width="600px"
                style="text-align: center">
            <el-table
                    :data="classBindData"
                    stripe
                    size="mini"
                    max-height="400px"
                    style="width: 100%">
                <el-table-column
                        prop="_id"
                        label="采集站分类id">
                </el-table-column>
                <el-table-column
                        prop="_val"
                        label="采集站分类名">
                </el-table-column>
                <el-table-column
                        prop="bind"
                        label="绑定分类">
                    <template slot-scope="scope">
                        <el-select v-model="sites[classBindIdx].binds[scope.row._id]" :clearable="true" placeholder="未绑定分类">
                            <el-option
                                    v-for="item in classes"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </el-container>
</template>

<script>
    import AdminService from '../../services/admin.service';
    import Loading from "../../utils/loading";

    export default {
        name: "AdminSite",
        data() {
            return {
                classBindData: [],
                classBindIdx: -1,
                classBindVisible: false,
                classes: null,
                sites: null,
            };
        },

        methods: {
            async cjSite(index, hour) {
                const routeData = this.$router.resolve({
                    name: 'spider',
                    query: {
                        flag: this.sites[index].flag,
                        hour: hour,
                        page: 0,
                    },
                });
                window.open(routeData.href, '_blank');
            },
            closeClassBind() {
                this.classBindVisible = false;
            },
            async showBind(index) {
                Loading.showLoad('请稍后...');
                let res = await AdminService.siteClasses(this.sites[index].flag);
                if (res.code === 0) {
                    this.$message.error(res.msg);
                    Loading.hideLoad();
                    return;
                }
                this.classBindIdx = index;
                this.classBindVisible = true;
                this.classBindData = res.data;
                Loading.hideLoad();
            },
            async addSite(index) {
                let res = await AdminService.siteAdd(this.sites[index]);
                if (res.code === 0) {
                    this.$message.error(res.msg);
                    return;
                }
                this.sites[index].edit = false;
                this.sites[index].binds = {};
                this.sites.push({
                    edit: true,
                    flag: '',
                    name: '',
                    api: '',
                    enable: true,
                });
            },
            async saveSite(index) {
                let res = await AdminService.siteUpdate(this.sites[index]);
                if (res.code === 0) {
                    this.$message.error(res.msg);
                } else {
                    this.$message.success('保存成功!');
                }
            },

            async cjAllSite() {
                this.$confirm('将在服务端生成采集任务，请勿重复操作，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(async () => {
                    let res = await AdminService.cjAllSite();
                    this.$message.info(res.msg);
                }).catch(() => {
                });
            },
        },

        async mounted() {
            Loading.showLoad('正在加载分类列表...');
            let res = await AdminService.classes();
            if (res.code === 0) {
                this.$message.error(res.msg);
                Loading.hideLoad();
                return;
            }
            this.classes = res.data;
            Loading.showLoad('正在加载站点列表...');
            res = await AdminService.sites();
            if (res.code === 0) {
                this.$message.error(res.msg);
                Loading.hideLoad();
                return;
            }
            this.sites = res.data;
            this.sites.push({
                edit: true,
                flag: '',
                name: '',
                api: '',
                enable: true,
            });
            Loading.hideLoad();
        },
    };
</script>

<style scoped lang="scss">

</style>
